<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        .btn{
            border: 0;
           
            padding: 6px 12px;
            border-radius: 5px;
            
        }

        .btn:hover{
            cursor: pointer;
        }

        .btn.btn-default{
            background-color: #f1f1f1;
            color: #666;
        }

        .btn.btn-primary{
            background-color: rgb(33, 185, 190);
            color: #fff;
        }

        .btn.btn-success{
            background-color: rgb(8, 207, 75);
            color: #fff;
        }

        .btn.btn-danger{
            background-color: rgb(221, 96, 38);
            color: #fff;
        }

        .btn.btn-warning{
            background-color: rgb(236, 208, 44);
            color: #fff;
        }

        /* .btn.btn-circle{
            border-radius: 50%;
            padding: 6px;
        } */
    </style>
</head>
<body>
    <div id="app">
        <!-- <button class="btn btn-primary">按钮</button>
        <button class="btn btn-success">按钮</button>
        <button class="btn btn-danger">按钮</button>
        <button class="btn btn-warning">按钮</button>
        <button class="btn btn-default">按钮</button> -->
        

        <!-- 使用自定义注册的按钮组件 -->
        <btn></btn>
        <!-- <btn type="succsssess"></btn> -->
        <hr>
        <!-- 1.直接在组件中通过属性方式实现组件的静态传参 (参数字符串) -->
        <btn type="primary"></btn>
        <btn type="success"></btn>
        <btn type="danger"></btn>
        <btn type="warning"></btn>

        <!-- 2.通过v-bind方式来实现动态传参 (参数就是父组件中的变量数据) -->
        <btn :type="t"></btn>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        /**
            <btn type="primary"></btn>
            封装一个按钮组件:
                要求 :
                    1)要实现多套风格样式 = > type ['primary' , 'success' , 'danger' , 'default' , 'warning']
                    2)内容的自定义
                    3)实现圆形 , 带图标 , 尺寸  mini small medium 

        */

        Vue.component('btn' , {
          // props:['type'],
            props:{
                // type:String ,//限定type属性只能传递一个字符串参数
                // type:[String , Number] ,//接受多种数据类型的数据 String , Number , Boolean , Array , Object , Function , Date, Promise
                type:{//针对于组件传递的type属性,进行约定
                    type:[String , Number]  ,// 约定当前组件传递的属性的类型
                    required:false,//必须传递参数 , 
                    default:"default",//约定参数的默认值
                    validator:function(value){//自定义校验
                        const allowTypes = ['primary' , 'success' , 'danger' , 'default' , 'warning'];
                        if(allowTypes.indexOf(value)==-1){
                            throw new TypeError("Your type parameter does not meet the requirements, please refer to it: [" + allowTypes +']')
                        }
                          return allowTypes.indexOf(value) !==-1; //只要返回布尔值 true 正确 , false 就是有问题
                    }
                }
            },
            template:`<button :class="['btn' , 'btn-'+type]">按钮</button>`
        })

        //vm 就是根组件
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据
                t:'success'
                // t:123456
            },
            methods:{//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>
</html>